<template>
  <div id="app" :style="{backgroundImage: 'url(' + backgroundImage + ')'}">
    <!-- <img class="bg" :src="backgroundImage" draggable="false"> -->
    <div>
      <div class="setting">
        <a href="#">
          <img src="../static/image/setting.png" alt="">
        </a>
      </div>
      <div class="sliderbar" style="left: 100%; transition: all .6s">
        <div class="sliderbar-title">
          <Icon type="android-settings"></Icon> 设 置</div>
        <div class="sliderbar-body">
          <div class="title spacing">
            <p>自定义标题 (15个字符以内)</p>
            <p>
              <Input v-model="websiteTitle" placeholder="输入标题" style="width: 200px"></Input>
              &nbsp;
              <Button type="primary" icon="checkmark" @click="titleSubmit">
              </Button>
            </p>
          </div>
          <div class="background-image spacing">
            <p>背景图片 (16:9)</p>
            <div>
              <div class="up">
                <div>
                  <a href="#">
                    <Icon type="edit"></Icon>
                  </a>
                </div>
                <img :src="backgroundImage" draggable="false">
              </div>
              <input type="file" id="img-upload" />
            </div>
            <p class="URL-path">文件名：{{ backgroundImageName }}</p>
          </div>
          <div class="background-ico spacing">
            <p>图标</p>

          </div>
        </div>
      </div>
      <div class="content">

        <div class="search-input">
          <div>
            <Dropdown placement="bottom-start">
              <a href="#">
                <img id="option-image" :src="optionImgURL" alt="">
                <Icon type="arrow-down-b"></Icon>
              </a>
              <DropdownMenu slot="list" v-for="item in searchEngines">
                <DropdownItem>
                  <div class="option">
                    <img :src="item.imgURL">
                    <span>{{item.name}}</span>
                  </div>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>
          <Input v-model="searchValue" size="large" placeholder="What's your favorite ..."></Input>
        </div>
        <div class="websiteTab">
          <div class="part">
            <a href="#">
              <img src="../static/image/ico/airbaloon.png" alt="">
            </a>
          </div>
          <div class="part">
            <a href="#">
              <img src="../static/image/ico/book.png" alt="">
            </a>
          </div>
          <div class="part">
            <a href="#">
              <img src="../static/image/ico/desert.png" alt="">
            </a>
          </div>
          <div class="part">
            <a href="#">
              <img src="../static/image/ico/girl.png" alt="">
            </a>
          </div>
          <div class="part">
            <a href="#">
              <img src="../static/image/ico/molecula.png" alt="">
            </a>
          </div>
          <div class="part">
            <a href="#">
              <img src="../static/image/ico/synthesizer.png" alt="">
            </a>
          </div>
          <div class="part">
            <a href="#">
              <img src="../static/image/google.png" alt="">
            </a>
          </div>
          <div class="part">
            <a href="#">
              <img src="../static/image/google.png" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      websiteTitle: "你的自定义标题",
      backgroundImage: "../static/image/background/pexels-photo-776390.jpeg",
      backgroundImageName: "这张是服务器图片…",
      searchValue: null,
      optionName: localStorage.fxpixels_optionName || "百 度",
      optionImgURL: "../static/image/baidu.png",
      optionInterface: localStorage.fxpixels_optionInterface || "aaa",
      searchEngines: [
        {
          name: "Google",
          imgURL: "../static/image/google.png",
          interface: "aaa"
        },
        {
          name: "百 度",
          imgURL: "../static/image/baidu.png",
          interface: "bbb"
        },
        {
          name: "bing",
          imgURL: "../static/image/bing.png",
          interface: "ccc"
        },
        {
          name: "搜狗微信",
          imgURL: "../static/image/sogou.png",
          interface: "ddd"
        },
        {
          name: "360搜索",
          imgURL: "../static/image/360so.png",
          interface: "eee"
        }
      ]
    };
  },
  methods: {
    getData() {
      var Value = this.searchValue;
      var engine = this.optionName;
      var _interface;
      for (var i = 0; i < this.searchEngines.length; i++) {
        if (this.searchEngines[i].name == engine) {
          _interface = this.searchEngines[i].interface;
        }
      }
      console.log(_interface)
      // if (){

      // }
    },
    titleSubmit() {
      // console.log(this.websiteTitle)
      document.title = this.websiteTitle;
    }
  },
  mounted() {
    var that = this;
    document.title = this.websiteTitle;
    this.$nextTick(() => {
      setTimeout(function() {
        $(".ivu-dropdown-item").click(function(e) {
          // console.log(e)
          var currentOption = e.currentTarget.innerText;
          that.optionName = $.trim(currentOption);
          for (var i = 0; i < that.searchEngines.length; i++) {
            if (that.searchEngines[i].name == that.optionName) {
              that.optionImgURL = that.searchEngines[i].imgURL;
              that.optionInterface = that.searchEngines[i].interface;
            }
          }
        });
      }, 200);
    });
    $(document).ready(function() {
      $(".setting").click(function(event) {
        $(".sliderbar").animate({}, function() {
          $(".sliderbar").css("transform", "translateX(-100%)");
        });
        event.stopPropagation(); //  阻止事件冒泡
      });
      $("html").click(function() {
        $(".sliderbar").animate({}, function() {
          $(".sliderbar").css("transform", "translateX(100%)");
        });
      });
      $(".sliderbar").click(function() {
        $(".sliderbar").animate({}, function() {
          $(".sliderbar").css("transform", "translateX(-100%)");
        });
        event.stopPropagation();
      });
      $(document).keyup(function(e) {
        var key = e.which;
        //按下 esc
        if (key == 27) {
          $(".sliderbar").animate({}, function() {
            $(".sliderbar").css("transform", "translateX(100%)");
          });
        }
        if (key == 13) {
          that.getData();
        }
      });
      $(".up").click(function() {
        // var src=getObjectURL(this.files[0]);
        document.querySelector("#img-upload").click();
        // return false;
      });
      // var upload = $('#img-upload')
      $("#img-upload").on("change", readFile);

      function readFile() {
        var file = this.files[0];
        var name = file.name;
        if (!/image\/\w+/.test(file.type)) {
          alert("请确保文件为图像类型");
          return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function() {
          // console.log(this.result);
          that.backgroundImage = this.result;
          that.backgroundImageName = name;
        };
      }
    });
  }
};
</script>

<style>
.spacing {
  margin-top: 30px;
}

.title input {
  margin-top: 8px;
}

.title button {
  margin-top: 8px;
}

.background-image img {
  width: 230.4px;
  height: 153.83px;
  position: relative;
  border-radius: 10px;
}

.background-image > div {
  margin-top: 10px;
  margin-bottom: 10px;
}

.URL-path {
  margin-top: 175px;
}
.up {
  position: absolute;
  width: 230.4px;
  vertical-align: center;
}

.up div {
  position: absolute;
  z-index: 99999;
  left: 85%;
  top: 76%;
  border: 1px dashed #fff;
  border-radius: 5px;
  width: 25px;
  height: 25px;
  text-align: center;
  vertical-align: middle;
}

.up a {
  color: #fff;
}

#img-upload {
  display: none;
}

.sliderbar {
  top: 0px;
  height: 100%;
  width: 350px;
  position: fixed;
  background-color: #181818;
  z-index: 9999;
  color: #fff;
}

.sliderbar-title {
  position: absolute;
  top: 25px;
  left: 25px;
  font-size: 20px;
  /* font-weight: bold; */
}

.sliderbar-body {
  margin-top: 70px;
  padding-left: 20px;
  font-size: 14px;
}

.content {
  width: 100%;
  height: 100%;
  position: relative;
}

.setting {
  position: absolute;
  /* left: 95%; */
  top: 20px;
  left: 95%;
}

.setting img {
  width: 30px;
}

.setting img {
  transition: 0.5s;
}

.setting img:hover {
  transform: rotate(150deg);
}

.websiteTab {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  position: relative;
  margin-top: 50px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 1280px;
  max-width: 1366px;
  width: 100%;
  height: 100%;
  padding-left: 10%;
  padding-right: 10%;
  flex-wrap: wrap;
  flex-basis: auto;
}

.part {
  margin-bottom: 50px;
  flex-shrink: 0;
  width: 20%;
  text-align: center;
}

@media screen and (max-width: 1366px) {
  .websiteTab img {
    width: 80px;
  }
}

@media screen and (max-width: 2540px) and (min-width: 1366px) {
  .websiteTab img {
    width: 100px;
  }
}

.websiteTab img {
  border-radius: 50%;
}

.websiteTab img {
  transition: 0.3s;
}

.websiteTab img:hover {
  box-shadow: 0px 0px 25px -3px #4184f5;
}

.search-input input {
  padding-left: 57px;
  height: 50px;
  font-size: 18px;
  letter-spacing: 1.5px;
}

.select-search-engines {
  visibility: hidden;
  position: absolute;
  z-index: 1000;
  width: 60px;
  height: 50px;
}

#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #181818;
  overflow: hidden;
  background-repeat: repeat;
}

@media screen and (max-height: 680px) {
  .content {
    margin-top: 26%;
  }
}

@media screen and (min-height: 680px) {
  .content {
    transform: translateY(43%);
  }
}

.search-input {
  width: 500px;
  margin: 0 auto;
  /* top: 30px; */
  margin-top: 100px;
  margin-bottom: 60px;
}

.search-input i {
  padding-left: 6px;
  margin-top: 6px;
  color: #dddee1;
}

.ivu-dropdown {
  position: absolute;
  width: 50px;
}

.ivu-dropdown-rel {
  width: 50px;
  height: 50px;
}

.ivu-select-dropdown {
  width: 120px;
}

.ivu-dropdown-item {
  height: 35px;
}

.search-input a {
  position: absolute;
  z-index: 1;
  top: 14px;
  left: 13px;
}

.search-input img {
  float: left;
  width: 22px;
  height: 22px;
}

.option span {
  float: right;
  padding-top: 2px;
  padding-left: 4px;
  padding-right: 2px;
  line-height: 20px;
}
</style>
